<template>
  <div class="porjectEdit">
    <c-title :hide="false" :text="'新增项目'"></c-title>
    <div class="porjectEditBox">
      <van-field v-model.trim="form.title" placeholder="请输入项目名称" required center clearable>
        <template #label>
          <span style="font-weight: 500;font-size: 0.88rem;color: #00001C;">项目名称</span>
        </template>
      </van-field>
      <van-field v-model.trim="form.category_id" placeholder="请选择项目分类" required center clearable readonly @click="show = true">
        <template #button>
          <van-icon name="arrow" />
        </template>
        <template #label>
          <span style="font-weight: 500;font-size: 0.88rem;color: #00001C;">项目分类</span>
        </template>
        <template #input>
          <span>{{ classTxt }}</span>
        </template>
      </van-field>
      <div class="cellBox">
        <div class="txt">上门服务</div>
        <van-radio-group v-model="form.call_out" direction="horizontal">
          <van-radio name="1" checked-color="#FE5E56">开启</van-radio>
          <van-radio name="0" checked-color="#FE5E56">关闭</van-radio>
        </van-radio-group>
      </div>
      <van-field v-model.trim="form.service_time" placeholder="请输入服务时间" required center clearable>
        <template #label>
          <span style="font-weight: 500;font-size: 0.88rem;color: #00001C;">服务时间（分）</span>
        </template>
      </van-field>
      <van-field v-model.trim="form.service_time_inteval" placeholder="请输入服务间隔时间" required center clearable>
        <template #label>
          <span style="font-weight: 500;font-size: 0.88rem;color: #00001C;">服务间隔时间（分）</span>
        </template>
      </van-field>
      <van-field v-model.trim="form.ahead_time" placeholder="请输入提前预约天数" required center clearable>
        <template #label>
          <span style="font-weight: 500;font-size: 0.88rem;color: #00001C;">可提前预约（天）</span>
        </template>
      </van-field>
      <van-field v-model.trim="form.period" placeholder="请输入使用期限" required center clearable>
        <template #label>
          <span style="font-weight: 500;font-size: 0.88rem;color: #00001C;">使用期限</span>
        </template>
      </van-field>
      <div class="cellBox">
        <div class="txt">
          <em class="require">*</em>
          项目缩略图
        </div>
        <div class="uploadBox">
          <div class="pos">
            <van-uploader :after-read="onRead"></van-uploader>
          </div>
          <van-icon name="plus" size="20px" color="#D6D6DC" v-if="!form.thumb" />
          <img v-else :src="form.thumb" alt="" />
        </div>
      </div>
      <div class="cellBox">
        <div class="txt">项目banner图</div>
        <div class="uploadBox">
          <div class="pos">
            <van-uploader :after-read="onRead1"></van-uploader>
          </div>
          <van-icon name="plus" size="20px" color="#D6D6DC" v-if="!form.banner_imgs" />
          <img v-else :src="form.banner_imgs" alt="" />
        </div>
      </div>
      <div class="cellBox">
        <div class="txt">项目简介</div>
        <van-field type="textarea" v-model="form.content" placeholder="请输入" />
      </div>
      <div class="cellBox">
        <div class="txt">项目描述</div>
        <van-field type="textarea" v-model="form.description" placeholder="请输入" />
      </div>
    </div>
    <div class="btn" @click="submit">提交</div>
    <van-popup v-model="show" position="bottom" :style="{ height: '19rem' }" round>
      <van-picker title="选择分类" show-toolbar :columns="columns" @confirm="onConfirm" @cancel="onCancel" />
    </van-popup>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: false,
      columns: [],
      classArray: [],
      form: {
        title: "",
        call_out: "0",
        service_time: 30,
        service_time_inteval: 0,
        ahead_time: 15,
        content: "", //简介
        description: "", //描述
        category_id: "",
        thumb: "",
        banner_imgs: ""
      },
      isclick: false
    };
  },
  activated() {
    this.init();
    this.getClass();
    if (this.$route.params.id) {
      // 编辑
      this.getProject();
    }
  },
  computed: {
    classTxt() {
      let str = "请选择项目分类";
      for (let i = 0; i < this.classArray.length; i++) {
        console.log(this.classArray[i].id == this.form.category_id);
        if (this.classArray[i].id == this.form.category_id) {
          str = this.classArray[i].name;
          console.log(str);
        }
      }
      return str;
    }
  },
  methods: {
    init() {
      this.form = {
        title: "",
        call_out: "0",
        service_time: 30,
        service_time_inteval: 0,
        ahead_time: 15,
        content: "", //简介
        description: "", //描述
        category_id: "",
        thumb: "",
        banner_imgs: ""
      };
      this.isclick = false;
    },
    onConfirm(val, index) {
      this.form.category_id = this.classArray[index].id;
      this.show = false;
    },
    onCancel() {
      this.show = false;
    },
    async submit() {
      if (this.isclick) return;
      this.isclick = true;
      let json = {
        form: this.form
      };
      let { msg, result, data } = await $http.post("plugin.appointment.frontend.project.store-project-save", json, ".");
      if (!result) {
        this.$toast(msg);
        return;
      }
      setTimeout(() => {
        this.isclick = false;
      }, 1000);
      this.$toast(msg);
      this.$router.go(-1);
    },
    ruleCheck() {},
    async getProject() {
      let { msg, result, data } = await $http.post("plugin.appointment.frontend.project.store-project-detail", { id: this.$route.params.id }, ".");
      if (!result) {
        return this.$toast(msg);
      }
      this.form = { ...data };
      this.form.call_out = String(this.form.call_out);
      console.log(this.form);
    },
    async getClass() {
      let { msg, result, data } = await $http.post("plugin.appointment.frontend.project-category.get-list", {}, ".");
      if (!result) {
        return this.$toast(msg);
      }
      this.classArray = data;
      if (data.length > 0) {
        let array = [];
        for (let i = 0; i < data.length; i++) {
          array.push(data[i].name);
        }
        this.columns = array;
      }
    },
    onRead(e) {
      let fd = new FormData();
      fd.append("file", e.file); // 第一个参数字符串可以填任意命名，第二个根据对象属性来找到file
      this.uploadUrl = this.fun.getRealUrl("upload.uploadPic", {});
      axios
        .post(this.uploadUrl, fd, {
          headers: { "Content-Type": "multipart/form-data" }
        })
        .then(response => {
          var responseData = response.data;
          if (responseData.result == 1) {
            this.form.thumb = responseData.data.img_url;
          } else {
            this.$toast(responseData.msg);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    onRead1(e) {
      let fd = new FormData();
      fd.append("file", e.file); // 第一个参数字符串可以填任意命名，第二个根据对象属性来找到file
      this.uploadUrl = this.fun.getRealUrl("upload.uploadPic", {});
      axios
        .post(this.uploadUrl, fd, {
          headers: { "Content-Type": "multipart/form-data" }
        })
        .then(response => {
          var responseData = response.data;
          if (responseData.result == 1) {
            this.form.banner_imgs = responseData.data.img_url;
          } else {
            this.$toast(responseData.msg);
          }
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
};
</script>
<style lang="scss" scoped>
.btn {
  width: 21.94rem;
  height: 2.5rem;
  line-height: 2.5rem;
  background: #f15353;
  margin: 0 auto;
  margin-top: 2.69rem;
  border-radius: 1.88rem;
  text-align: center;
  color: #fff;
  margin-bottom: 1.25rem;
}
.porjectEdit {
  overflow: hidden;
  .porjectEditBox {
    margin: 0.63rem 0.78rem;
    padding: 0 0.75rem 0 0;
    box-sizing: border-box;
    background: #fff;
    .cellBox {
      display: flex;
      padding: 1.16rem 0 1.16rem 0.85rem;
      box-sizing: border-box;
      position: relative;
      .van-cell {
        padding-top: 0;
        padding-left: 0;
      }
      .txt {
        flex-shrink: 0;
        text-align: left;
        width: 5.5rem;
        font-weight: 500;
        font-size: 0.88rem;
        color: #00001c;
        margin-right: 0.375rem;
        position: relative;
        .require {
          position: absolute;
          left: -5px;
          color: #ee0a24;
          font-size: 14px;
          content: "*";
        }
      }
      .uploadBox {
        width: 4.63rem;
        height: 4.63rem;
        background: #f8f8f8;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 0.31rem;
        position: relative;
        .pos {
          position: absolute;
          width: 100%;
          height: 4.63rem;
          opacity: 0;
        }
        img {
          width: 100%;
          height: 100%;
          border-radius: 0.31rem;
        }
      }
    }
    .cellBox::after {
      content: "";
      position: absolute;
      right: 16px;
      bottom: 0;
      left: 16px;
      border-bottom: 1px solid #f0f0f1;
    }
    .l_f {
      // width: 5.5rem;
      flex: 5.5rem 0;
      text-align: left;
    }
    .r_f {
      flex: 1;
    }
    .van-cell {
      padding: 1.16rem 0 1.16rem 0.85rem;
    }
    .van-field__label {
      width: 5.5rem !important;
    }
  }
}
</style>
